<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- // 请简单实现双向数据绑定 mvvm。 -->
    <input id="input" />
    <div id="showText"></div>
    <button onclick="change()">改变棒棒糖</button>
    <script>
        const data = {};
        const input = document.getElementById('input');
        const text = document.getElementById("showText")
        Object.defineProperty(data, 'text', {
            set(value) {
                console.log(value)
                input.value = value
                text.innerHTML = value
                this.value = value;
            }
        });
        input.oninput = function (e) {
            data.text = e.target.value;
        }
        function change(e) {
            console.log(e)
            data.text = "bangbangtang"
        }
    </script>


    <br />
    <!-- proxy 实现数据流 -->
    <input id="input2" />
    <div id="showText2"></div>
    <button onclick="change2()">改变棒棒糖</button>
    <script>
        const data2 = {};
        const input2 = document.getElementById('input2');
        const text2 = document.getElementById("showText2")
        let proxy = new Proxy(data2, {
            get(target, key, val) {

            },
            set(target, key, val) {
                console.log()
                input2.value = val;
                text2.innerHTML = val;
                return Reflect.set(target, key, val)
            }
        })

        input2.oninput = function (e) {
            console.log(e)
            proxy.text = e.target.value
        }

        function change2() {
            proxy.text = "jiao"
        }
    </script>


    <!-- 实现沙箱 -->
    <script>
        class Standbox {
            constructor(fakeWindow) {
                this.originWindow = window
                this.window = fakeWindow || {};
                this.proxy = null
                this.init()
            }

            init() {
                this.proxy = new Proxy(this.window, {
                    get(target, key, val) {
                        return Reflect.get(target, key, val)
                    },
                    set(target, key, val) {
                        return Reflect.set(target, key, val)
                    }
                })
            }

        }

        let standbox1 = new Standbox();
        let standbox2 = new Standbox();

        ((window) => { window.a = 1; console.log(window.a) })(standbox1.proxy);
        ((window) => { window.a = 4; console.log(window.a) })(standbox2.proxy)

    </script>
</body>

</html>